h1, h2, p {
  text-align: center; /* Alinea los títulos y los textos en el centro */
}

.menu {
  background-color: burlywood; /* Establece el color del fondo del menú */

  /* Establece el ancho máximo del menú respecto al <body> */
  max-width: 500px;

  /* Centra el contenedor del menú */
  margin-left: auto;
  margin-right: auto;
  padding: 20px; /* Agrega espaciado en el borde del contenedor del menú */
}

body {
  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); /* Establece la imagen de fondo de la página */
}

.flavor, .dessert {
  text-align: left; /* Alinea el texto del tipo de café y postre a la izquierda */
  width: 75%; /* Establece el ancho del elemento del tipo de café y postre respecto al <article> */
}

.price {
  text-align: right; /* Alinea el texto del precio a la derecha */
  width: 25%; /* Establece el ancho del elemento del precio respecto al <article> */
}

.item p {
  display: inline-block; /* Coloca en elementos de línea cada producto */
}
